<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <div v-if="crud.props.searchToggle">
        <el-row :gutter="10">
          <el-form
            ref="elForm"
            :model="query"
            size="mini"
            label-width="125px"
            label-position="right"
          >
            <el-col :span="24">
              <el-row>
                <el-col :span="6">
                  <label class="el-form-item-label">所属公司</label>
                  <el-select
                    v-model="query.companyIds"
                    clearable
                    placeholder="选择案件所属公司"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    filterable
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in companyIdOptions"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">所属站点</label>
                  <el-cascader
                    v-model="query.companySiteIds"
                    :options="companySiteIdOptions"
                    :props="siteProps"
                    placeholder="请选择公司站点"
                    separator=","
                    filterable
                    clearable
                    :show-all-levels="false"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">站长姓名</label>
                  <el-input
                    v-model="query.siteUserName"
                    clearable
                    placeholder="站长姓名"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">站长手机</label>
                  <el-input
                    v-model="query.siteUserMobile"
                    clearable
                    placeholder="站长手机"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-col :span="6">
                  <label class="el-form-item-label">报案号</label>
                  <el-input
                    v-model="query.reportNo"
                    clearable
                    placeholder="报案号"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">保单号</label>
                  <el-input
                    v-model="query.policyNo"
                    clearable
                    placeholder="保单号"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">骑手名称</label>
                  <el-input
                    v-model="query.userName"
                    clearable
                    placeholder="骑手名称"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">出险人手机</label>
                  <el-input
                    v-model="query.userMobile"
                    clearable
                    placeholder="出险人手机号码"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-col :span="6">
                  <label class="el-form-item-label">骑手身份证</label>
                  <el-input
                    v-model="query.userIdCard"
                    clearable
                    placeholder="骑手身份证"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">理赔对象</label>
                  <el-select
                    v-model="query.claimTypes"
                    clearable
                    placeholder="理赔对象"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    @keyup.enter.native="crud.toQuery"
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">责任判定</label>
                  <el-select
                    v-model="query.responsibilityIds"
                    clearable
                    placeholder="责任判定"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in responsibilityIdsOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">有无附加险</label>
                  <el-select
                    v-model="query.additional"
                    clearable
                    placeholder="有无附加险"
                    style="width: 185px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in additionalOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    >{{ item.label }}</el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-col :span="6">
                  <label class="el-form-item-label">案件状态</label>
                  <el-select
                    v-model="query.caseStatus"
                    clearable
                    placeholder="案件状态"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in caseStatusOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">出险类型</label>
                  <el-select
                    v-model="query.accidentTypeIds"
                    clearable
                    placeholder="出险类型"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in accidentTypeIdsOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">事故区域</label>
                  <el-cascader
                    v-model="query.accidentRegionCode"
                    :options="aredData"
                    :props="accidentRegionCodeProps"
                    placeholder="请选择事故区域"
                    separator=","
                    filterable
                    clearable
                  />
                </el-col>
                <el-col :span="6">
                  <label class="el-form-item-label">理赔员</label>
                  <el-select
                    v-model="query.responsibleUserIds"
                    clearable
                    placeholder="理赔员"
                    style="width: 185px;"
                    class="filter-item"
                    multiple
                    filterable
                    @keyup.enter.native="crud.toQuery"
                  >
                    <el-option
                      v-for="(item, index) in responsibleUserIdOptions"
                      :key="index"
                      :label="item.nickName"
                      :value="item.id"
                      :disabled="item.disabled"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
               <el-row>
                <el-col :span="12">
                  <label class="el-form-item-label">出险时间</label>
                  <date-range-picker
                    v-model="query.accidentDate"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    class="date-item"
                  />
                </el-col>
                <el-col :span="12">
                  <label class="el-form-item-label">创建时间</label>
                  <date-range-picker
                    v-model="query.createTime"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    class="date-item"
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-form>
        </el-row>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="理赔员" prop="responsibleUserId">
                  <el-select
                    v-model="form.responsibleUserId"
                    placeholder="请选择理赔员"
                    filterable
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in responsibleUserIdOptions"
                      :key="index"
                      :label="item.nickName"
                      :value="item.id"
                      :disabled="item.disabled"
                    />
                  </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="changeUser(crud.form)">确认</el-button>
        </div>
      </el-dialog>
      <!-- 详情 -->
    <el-dialog :visible.sync="detailsVisible" width="75%">
      <el-descriptions title="" :column="4">
      <el-descriptions-item label="所属公司">{{
        caseDetail.companyName
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人">{{
        caseDetail.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属站点">{{
        caseDetail.companySiteName
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人手机号">{{
        caseDetail.userMobile
      }}</el-descriptions-item>
      <el-descriptions-item label="保单号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人身份证号">{{
        caseDetail.userIdCard
      }}</el-descriptions-item>
      <el-descriptions-item label="报案号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="赔偿对象">{{
        caseDetail.claimType ? CASE_CLAIM_TYPES[caseDetail.claimType] : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="出险类型">{{
        getLabelsByIds(caseDetail.accidentTypeIds, CASE_ACCIDENT_TYPES)
      }}</el-descriptions-item>
      <el-descriptions-item label="出险时间">{{
        caseDetail.accidentDate
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        caseDetail.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="保险方案">{{
        caseDetail.mainSchemeName
      }}</el-descriptions-item>
      <el-descriptions-item label="补充保险方案">{{
        caseDetail.additionalSchemeName
      }}</el-descriptions-item>
      <el-descriptions-item label="责任判定">{{
        getLabelsByIds(
          caseDetail.responsibilityIds,
          CASE_RESPONSIBILITY_OPTIONS
        )
      }}</el-descriptions-item>
      <el-descriptions-item label="事故地址">{{
        caseDetail.accidentAddress
      }}</el-descriptions-item>
      <el-descriptions-item label="事故概况">{{
        caseDetail.accidentDesc
      }}</el-descriptions-item>
      <el-descriptions-item label="理赔员" :span="4">{{
        caseDetail.responsibleUserName
      }}</el-descriptions-item>
      <el-descriptions-item label="主要资料管理" :span="4">
        <div class="disabled-upload">
          <el-upload
            action="#"
            :auto-upload="false"
            :disabled="true"
            :file-list="caseDetailMainDoc"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="onPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="附属资料管理" :span="4">
        <div class="disabled-upload">
          <el-upload
            action="#"
            :auto-upload="false"
            :disabled="true"
            :file-list="additionalDetailMainDoc"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="onPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="false" prop="id" label="id" />
        <el-table-column prop="reportNo" label="报案号" width="100" />
        <!-- <el-table-column prop="createTime" label="创建日期" /> -->
        <el-table-column prop="userName" label="出险人" />
        <el-table-column prop="userMobile" label="骑手手机" />
        <!-- <el-table-column prop="userIdCard" label="骑手身份证" /> -->
        <el-table-column prop="accidentDate" label="出险时间" />
        <el-table-column prop="caseStatusDesc" label="案件状态" width="80" />
        <el-table-column prop="retentionTime" label="滞留时间" />
        <el-table-column prop="companyName" label="所属公司" />
        <el-table-column prop="companySiteName" label="所属公司站点" />
        <el-table-column prop="siteUserName" label="站长姓名" />
        <el-table-column prop="siteUserMobile" label="站长手机" />
        <el-table-column prop="responsibleUserName" label="理赔员" />
        <el-table-column prop="overTime" label="结案时间" />
        <!-- <el-table-column prop="lastUpdateTime" label="最后更改时间" />
        <el-table-column prop="lastUpdateId" label="最后操作人" /> -->
        <!-- <el-table-column prop="claimType" label="理赔对象" />
        <el-table-column prop="responsibilityIds" label="责任判断ids" />
        <el-table-column prop="additional" label="有无附加险" />
        <el-table-column prop="accidentTypeIds" label="出险类型" />
        <el-table-column prop="accidentRegionCode" label="事故区域code" />
        <el-table-column prop="accidentAddress" label="事故地址" />
        <el-table-column prop="accidentDesc" label="事故说明" />
        <el-table-column prop="caseStatus" label="案件状态" />
        <el-table-column prop="mainInsuredCompensationAmount" label="主险赔付金额" />
        <el-table-column prop="additionalMainInsuredCompensationAmount" label="附加险赔付金额" />
        <el-table-column prop="otherAmount" label="其他金额" /> -->
        <el-table-column
          v-if="checkPer(['admin', 'case:edit', 'case:add'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button type="text" size="mini" @click="getCaseHandlerDetail(scope.row.id)">详情</el-button> -->
            <el-button v-if="checkPer(['admin', 'case:edit:super'])" type="text" size="mini" @click="toEdit(scope.row.id)">修改信息</el-button>
            <el-button v-if="checkPer(['admin', 'case:edit'])" type="text" size="mini" @click="toHandler(scope.row.id)">处理案件</el-button>
            <udOperation :data="scope.row" :permission="permission" :disabledDle="true" :disabledEdit="true"/>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudInsuredApply from '@/api/insurance/case'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import aredData from '../../../data/ared.json'
import { getTree } from '@/api/system/dept'
import { getAll } from '@/api/system/user'
import {
  CASE_STATUS,
  CASE_CLAIM_TYPES,
  CASE_RESPONSIBILITY_OPTIONS,
  CASE_ADDITIONAL,
  CASE_CONNECT_TYPES,
  CASE_ACCIDENT_TYPES
} from '@/constants'
const defaultForm = {
  id: null,
  createUserId: null,
  isDeleted: null,
  createTime: null,
  lastUpdateTime: null,
  lastUpdateId: null,
  insuredUserId: null,
  companyId: null,
  companySiteId: null,
  siteUserName: null,
  siteUserMobile: null,
  reportNo: null,
  policyNo: null,
  userName: null,
  userMobile: null,
  userIdCard: null,
  claimType: null,
  responsibilityIds: null,
  additional: null,
  caseSpeek: null,
  accidentDate: null,
  accidentTypeIds: null,
  accidentRegionCode: null,
  accidentAddress: null,
  accidentDesc: null,
  responsibleUserId: null,
  caseStatus: null,
  mainInsuredCompensationAmount: null,
  additionalMainInsuredCompensationAmount: null,
  otherAmount: null
}
export default {
  name: 'CaseOver',
  components: { pagination, crudOperation, udOperation, rrOperation, DateRangePicker },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '案件列表',
      url: 'api/insured-apply',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudInsuredApply },
      params: { caseSpeeks: 6 },
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: true,
        download: true
      }
    })
  },
  data() {
    return {
      CASE_STATUS,
      CASE_ADDITIONAL,
      CASE_RESPONSIBILITY_OPTIONS,
      CASE_CONNECT_TYPES,
      CASE_ACCIDENT_TYPES,
      CASE_CLAIM_TYPES,
      caseDetail: {},
      claimType: '',
      mainDoc: [],
      additionalDoc: [],
      caseDetailMainDoc: [],
      additionalDetailMainDoc: [],
      detailsVisible: false,
      defaultParams: {},
      aredData,
      companyIdOptions: [],
      companySiteIdOptions: [],
      permission: {
        add: ['admin', 'insuredApply:add'],
        edit: ['admin', 'insuredApply:edit'],
        del: ['admin', 'insuredApply:del']
      },
      rules: {
        responsibleUserId: [
          { required: true, message: '理赔员不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'companyIds', display_name: '案件所属公司' },
        { key: 'companySiteIds', display_name: '案件所属公司站点' },
        { key: 'siteUserName', display_name: '站长姓名' },
        { key: 'siteUserMobile', display_name: '站长手机' },
        { key: 'reportNo', display_name: '报案号' },
        { key: 'policyNo', display_name: '保单号' },
        { key: 'userName', display_name: '骑手名称' },
        { key: 'userMobile', display_name: '出险人手机号码' },
        { key: 'userIdCard', display_name: '骑手身份证' },
        { key: 'claimTypes', display_name: '理赔对象' },
        { key: 'responsibilityIds', display_name: '责任判断ids' },
        { key: 'additional', display_name: '有无附加险' },
        { key: 'caseSpeeks', display_name: '案件状态' },
        { key: 'accidentTypeIds', display_name: '出险类型' },
        { key: 'accidentRegionCode', display_name: '事故区域code' },
        { key: 'responsibleUserIds', display_name: '理赔员' }
      ],
      accidentRegionCodeProps: {
        multiple: false,
        label: 'label',
        value: 'value',
        children: 'children',
        checkStrictly: false
      },
      siteProps: {
        multiple: true,
        label: 'label',
        value: 'id',
        children: 'children',
        checkStrictly: false,
        emitPath: false
      },
      responsibleUserIdOptions: [],
      accidentTypeIdsOptions: [
        {
          label: '自身受伤',
          value: 1
        },
        {
          label: '三者受伤',
          value: 2
        },
        {
          label: '三者物损',
          value: 3
        }
      ],
      responsibilityIdsOptions: [
        {
          label: '全责',
          value: 1
        },
        {
          label: '主责',
          value: 2
        },
        {
          label: '次责',
          value: 3
        },
        {
          label: '五五责',
          value: 4
        },
        {
          label: '无责',
          value: 5
        },
        {
          label: '摔伤',
          value: 6
        }
      ],
      additionalOptions: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      caseStatusOptions: [
        {
          label: '待处理',
          value: 0
        },
        {
          label: '赔理分配',
          value: 1
        },
        {
          label: '系统报案',
          value: 2
        },
        {
          label: '资料收集',
          value: 3
        },
        {
          label: '保险公司定损',
          value: 4
        },
        {
          label: '诉讼',
          value: 5
        },
        {
          label: '协议文件',
          value: 6
        },
        {
          label: '公司盖章',
          value: 7
        },
        {
          label: '待打款',
          value: 10
        },
        {
          label: '结案',
          value: 20
        }
      ]
    }
  },
  computed: {
    getLabelsByIds() {
      return function(ids, map) {
        if (ids == null || ids === undefined || map === undefined) {
          return ''
        }
        return ids
          .split(',')
          .map(id => map[id])
          .join('，')
      }
    }
  },
  watch: {
    caseDetail(newVal) {
      if (newVal) {
        this.claimType = '' + newVal.claimType
        this.caseDetailMainDoc = newVal.mainDoc.map(item => ({
          url: item,
          name: item
        }))
        this.additionalDetailMainDoc = newVal.additionalDoc.map(item => ({
          url: item,
          name: item
        }))
      }
    }
  },
  created() {
    getTree().then(res => {
      this.companyIdOptions = res
      this.companySiteIdOptions = res
    })
    getAll({ job: '理赔员' }).then(res => {
      if (res != null) {
        this.responsibleUserIdOptions = res
      }
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    getCaseHandlerDetail(id) {
      this.caseDetail = null
      this.detailsVisible = true
      crudInsuredApply.detail(id).then(res => {
        this.caseDetail = res
      })
    },
    toEdit(id) {
      const deitRouter = this.$router.resolve({ path: '/insurance/edit', query: { id: id }})
      window.open(deitRouter.href, '_blank')
    },
    toHandler(id) {
      const handlerRouter = this.$router.resolve({ path: '/insurance/handler', query: { id: id }})
      window.open(handlerRouter.href, '_blank')
    },
    changeUser(data) {
      this.crud.status.edit = 2
      crudInsuredApply.updateUser(data).then(() => {
        this.crud.status.edit = 0
        this.crud.editSuccessNotify()
        this.crud.resetForm()
        this.crud.refresh()
      }).catch(() => {
        this.crud.status.edit = 2
      })
    }
  }
}
</script>

<style scoped></style>
